ComponentOne Basic Library for UWP
Step 2 of 3: Adding Data to the ListBox
UWP Edition Basic Library > ListBox for UWP > C1ListBox Quick Start > Step 2 of 3: Adding Data to the ListBox

In the last step, you added the C1ListBox control to the application. In this step, you will add code to display images from a photo stream.

Complete the following steps to add data to the control programmatically:

  1. Select the Page, navigate to the Properties window, click the lightning bolt Events button to view events, and scroll down and double-click the area next to the Loaded event.

    This will open the Code Editor and add the Page_Loaded event.

  2. Add the following imports statements to the top of the page:
    Visual Basic
    Copy Code 
    Imports C1.Xaml
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Xml.Linq
Imports Windows.UI.Popups
Imports Windows.UI.Xaml
Imports Windows.UI.Xaml.Controls
    C#
    Copy Code 
    using C1.Xaml;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
  3. Add the following code inside the Page_Loaded event handler:
    Visual Basic
    Copy Code 
    LoadPhotos()
    C#
    Copy Code 
    LoadPhotos();
  4. Add the following code below the Page_Loaded event within the MainPage class:
    Visual Basic
    Copy Code 
    Private Async Function LoadPhotos() As Task
        Dim flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"
        Dim AtomNS = "http://www.w3.org/2005/Atom"

        Dim photos = New List(Of Photo)()
        Dim client = WebRequest.CreateHttp(New Uri(flickrUrl))
        Dim response = Await client.GetResponseAsync()

        Try
            '#Region "** parse data"
            Dim doc = XDocument.Load(response.GetResponseStream())
            For Each entry As XElement In doc.Descendants(XName.[Get]("entry", AtomNS))
                Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value

                Dim enclosure = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "enclosure").FirstOrDefault()
                Dim contentUri = enclosure.Attribute("href").Value
                photos.Add(New Photo() With { _
                    .Title = title, _
                    .Content = contentUri, _
                    .Thumbnail = contentUri.Replace("_b", "_m") _
                })
            Next
            '#End Region

            listBox.ItemsSource = photos
            loading.Visibility = Visibility.Collapsed
            listBox.Zoom = C1ZoomUnit.Fill
            listBox.Visibility = Visibility.Visible
        Catch
            Dim dialog = New MessageDialog("There was an error when attempting to download data from Flickr.")
            async dialog.ShowAsync()
        End Try
    End Function
    C#
    Copy Code 
    private async void LoadPhotos()
        {
            var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
            var AtomNS = "http://www.w3.org/2005/Atom";

            var photos = new List<Photo>();
            var client = WebRequest.CreateHttp(new Uri(flickrUrl));
            var response = await client.GetResponseAsync();

            try
            {
                #region ** parse data
                var doc = XDocument.Load(response.GetResponseStream());
                foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
                {
                    var title = entry.Element(XName.Get("title", AtomNS)).Value;
                  
                    var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault();
                    var contentUri = enclosure.Attribute("href").Value;
                    photos.Add(new Photo() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b","_m") });
                }
                #endregion

                listBox.ItemsSource = photos;
                loading.Visibility = Visibility.Collapsed;
                listBox.Zoom = C1ZoomUnit.Fill;
                listBox.Visibility = Visibility.Visible;
            }
            catch
            {
                var dialog = new MessageDialog("There was an error when attempting to download data from Flickr.");
                async dialog.ShowAsync();
            }
        }
  5. The code above pulls images from Flickr's public photo stream and binds the C1ListBox to the list of images.
  6. Add the following code just below the MainPage class:
    Visual Basic
    Copy Code 
    Public Class Photo
        Public Property Title() As String
            Get
                Return m_Title
            End Get
            Set(value As String)
                m_Title = Value
            End Set
        End Property
        Private m_Title As String
        Public Property Thumbnail() As String
            Get
                Return m_Thumbnail
            End Get
            Set(value As String)
                m_Thumbnail = Value
            End Set
        End Property
        Private m_Thumbnail As String
        Public Property Content() As String
            Get
                Return m_Content
            End Get
            Set(value As String)
                m_Content = Value
            End Set
        End Property
        Private m_Content As String
    End Class
    C#
    Copy Code 
    public class Photo
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        public string Content { get; set; }
    }

What You've Accomplished

You have successfully added data to C1TileListBox. In the next step, Step 3 of 3: Running the ListBox Application, you'll examine the ListBox for UWP features.

See Also
Step 3 of 3: Running the ListBox Application

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page